<template>
  <div>
    <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
    >
      <el-form-item label="创建人" prop="create_rid">
        <el-select
          v-model="form.create_rid"
          placeholder="请选择创建人"
          clearable
          filterable
          style="width: 40%;"
        >
          <el-option
            v-for="item in settleCreaterOption"
            :key="item.rid"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="股票状态" prop="stock_status">
        <el-select
            v-model="form.stock_status"
            placeholder="请选择股票状态"
            clearable
            style="width: 40%;"
        >
          <el-option
              v-for="item in stockStatusOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="交易定性" prop="trade_characterization">
        <el-select
            v-model="form.trade_characterization"
            placeholder="请选择交易定性"
            clearable
            filterable
            allow-create
            multiple
            style="width: 40%;"
        >
          <el-option
              v-for="item in tradeCharacterizationList"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
        <div>
          <el-button type="text" icon="el-icon-circle-plus-outline" size="mini" @click="toAddCharacterization">新增交易定性</el-button>
        </div>
      </el-form-item>

      <el-form-item label="所属板块" prop="sector">
        <el-select
            v-model="form.sector"
            placeholder="请选择所属板块"
            clearable
            filterable
            allow-create
            multiple
            style="width: 40%;"
        >
          <el-option
              v-for="item in sectorList"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
        <div>
          <el-button type="text" icon="el-icon-circle-plus-outline" size="mini" @click="toAddSector">新增板块</el-button>
        </div>
      </el-form-item>

      <el-form-item label="仓位建议" prop="positioning_advice">
        <el-select
            v-model="form.positioning_advice"
            placeholder="请选择仓位建议"
            clearable
            style="width: 40%;"
        >
          <el-option
              v-for="item in positioningAdviceOption"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="目标价" prop="target_price">
        <el-input v-model="form.target_price" placeholder="请输入目标价" style="width: 40%;" />
      </el-form-item>

      <el-form-item label="止损价" prop="stop_loss_price">
        <el-input v-model="form.stop_loss_price" placeholder="请输入止损价" style="width: 40%;" />
      </el-form-item>

      <el-form-item label="最新边际变化" prop="latest_marginal_change">
        <el-input v-model="form.latest_marginal_change" type="textarea" :rows="5" placeholder="请输入最新边际变化" />
      </el-form-item>

      <el-form-item label="后续跟踪重点" prop="main_focus_further_monitoring">
        <el-input v-model="form.main_focus_further_monitoring" type="textarea" :rows="5" placeholder="请输入后续跟踪重点" />
      </el-form-item>

      <el-form-item label="正面评价" prop="favorable">
        <el-input v-model="form.favorable" type="textarea" :rows="5" placeholder="请输入正面评价" />
      </el-form-item>

      <el-form-item label="负面评价" prop="negative">
        <el-input v-model="form.negative" type="textarea" :rows="5" placeholder="请输入负面评价" />
      </el-form-item>

      <el-form-item label="估值逻辑" prop="upside">
        <el-input v-model="form.upside" type="textarea" :rows="5" placeholder="请输入估值逻辑" />
      </el-form-item>

      <el-form-item label="风险止损策略" prop="risk_exit_strategy">
        <el-input v-model="form.risk_exit_strategy" type="textarea" :rows="5" placeholder="请输入风险止损策略" />
      </el-form-item>
    </el-form>

    <!-- 板块新增弹窗 -->
    <el-dialog title="新增板块配置" :visible.sync="dialogVisibleSector" width="600px" @close="dialogVisibleSector = false" :modal="false" top="20vh">
      <SectorConfig
          :mode="dialogMode"
          :row-data="currentRow"
          @close="dialogVisibleSector = false"
          @save-success="handleSaveSuccessSector"
      />
    </el-dialog>

    <!-- 交易定性新增弹窗 -->
    <el-dialog title="新增交易定性配置" :visible.sync="dialogVisibleCharacterization" width="600px" @close="dialogVisibleCharacterization = false" :modal="false" top="20vh">
      <CharacterizationConfig
          :mode="dialogMode"
          :row-data="currentRow"
          @close="dialogVisibleCharacterization = false"
          @save-success="handleSaveSuccessCharacterization"
      />
    </el-dialog>
  </div>
</template>

<script>
import { getDictList,getUserList } from '@/api/stockpool'
import CharacterizationConfig from '@/layout/components/characterizationConfig/index.vue'
import SectorConfig from '@/layout/components/sectorConfig/index.vue'

export default {
  name: 'StockForm',
  props: {
    initData: {
      type: Object,
      default: () => ({})
    },
    form: {
      type: Object,
      required: true
    }
  },
  components: {
    CharacterizationConfig,
    SectorConfig
  },
  data() {
    return {
      // form: {
      //   trade_characterization: [],
      //   sector: [],
      //   positioning_advice: '',
      //   target_price: '',
      //   stop_loss_price: '',
      //   latest_marginal_change: '',
      //   main_focus_further_monitoring: '',
      //   favorable: '',
      //   negative: '',
      //   upside: '',
      //   risk_exit_strategy: ''
      // },
      dialogVisibleCharacterization: false,
      dialogVisibleSector: false,
      dialogMode: 'create',
      currentRow: null,
      tradeCharacterizationList: [],
      sectorList: [],
      settleCreaterOption: [],
      positioningAdviceOption: this.hashmap.positioningAdviceOption,
      stockStatusOption: this.hashmap.stockStatusOption,
      rules: {
        trade_characterization: [{ required: true, trigger: 'change', message: '请选择交易定性' }],
        positioning_advice: [{ required: true, trigger: 'change', message: '请选择仓位建议' }],
        target_price: [{ required: true, trigger: 'blur', message: '请输入目标价' }],
        stop_loss_price: [{ required: true, trigger: 'blur', message: '请输入止损价' }],
        sector: [{ required: true, trigger: 'change', message: '请选择所属板块' }],
        stock_status: [{ required: true, trigger: 'change', message: '请选择股票状态' }],
      }
    }
  },
  watch: {
    initData: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && Object.keys(val).length) {
          this.form = { ...this.form, ...val }
        }
      }
    },
  },
  created() {
    this.rid=localStorage.getItem("rid")
    this.getSectorList()
    this.getTradeList()
    this.getUserList()
  },
  methods: {
    validate(cb) {
      this.$refs.formRef.validate(cb)
    },
    submit() {
      this.$refs.formRef.validate(valid => {
        if (!valid) return
        this.$emit('success', this.form)
      })
    },
    getSectorList() {
      getDictList({ dict_type: 1 }).then(res => {
        this.sectorList = res.data.list.map(item => ({
          value: item.dict_id,
          label: item.dict_value,
          key: item.dict_id,
          type: item.dict_value
        }))
      })
    },
    getTradeList() {
      getDictList({ dict_type: 2 }).then(res => {
        this.tradeCharacterizationList = res.data.list.map(item => ({
          value: item.dict_id,
          label: item.dict_value,
          key: item.dict_id,
          type: item.dict_value
        }))
      })
    },
    toAddCharacterization() {
      this.dialogMode = 'create'
      this.currentRow = null
      this.dialogVisibleCharacterization = true
    },
    toAddSector() {
      this.dialogMode = 'create'
      this.currentRow = null
      this.dialogVisibleSector = true
    },
    handleSaveSuccessSector() {
      this.dialogVisibleSector = false
      this.getSectorList()
    },
    handleSaveSuccessCharacterization() {
      this.dialogVisibleCharacterization = false
      this.getTradeList()
    },

     getUserList() {
      getUserList({
        'page': 1,
        'page_size': 1000
      }).then((res) => {
        this.settleCreaterOption = res.data.list.map((item) => {
          return {
            value: item.id,
            label: item.nick_name,
            key: item.id,
            type: item.nick_name
          }
        })
  
        // 新增时创建人选中当前登录用户，修改则保持原来创建人
        if (!this.form.change_log_id || !this.form.create_rid) {
          const me = res.data.list.find(user => user.id == this.rid);
          if (me) {
            this.form.create_rid = me.id;
          }
        }

      }).catch((res) => {
      })
    },
  }
}
</script>
